<template>
  <div>
    <el-form>
      <el-form-item label="测试">
        <TreeSelect v-model="selectedId" :config="colProps" />
        <p>选中的 ID: {{ selectedId }}</p>
      </el-form-item>
    </el-form>

    <div style="height: 600px">
      <vxe-table
        show-overflow
        border
        ref="xTreeRef"
        :show-header="true"
        :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
        height="auto"
        :column-config="{ resizable: true }"
        :tree-config="{
          expandAll: true,
          transform: true,
          rowField: 'id',
          parentField: 'parent_id'
        }"
        :data="tableData"
        :scroll-y="{ enabled: true, gt: 0 }"
        @cell-click="handleCellClick"
      >
        <vxe-column width="300" tree-node>
          <template #default="{ row }">
            <div class="text">{{ row.label }}</div>
          </template>
        </vxe-column>
        <vxe-column field="id" title="id" />
        <vxe-column field="parent_id" title="parent_id" />

        <!-- <vxe-column type="seq" width="200" tree-node />
      <vxe-column field="id" title="Id" />
      <vxe-column field="name" title="Name" /> -->
      </vxe-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TreeSelect from '@/modules/meta/TreeSelect.vue'
import { doApi } from '@/api/basic'

const selectedId = ref(619) // 默认选中的 ID
const treeData = ref([]) // 树形数据

const colProps = {
  url: '/api/struct_editor/get_list_data/person',
  method: 'post',
  params: {
    parent_id: '3'
  },
  multiple: false,
  keyField: 'id',
  nameField: 'label',
  parentField: 'parent_id'
}

const tableData = ref([])
// 查询树数据
const getTree = async () => {
  const res = await doApi(colProps.url, colProps.params, colProps.method)
  tableData.value = res.data.map((x) => ({ ...x, id: `${x.id}` }))
  console.log('===>', tableData.value)
}
getTree()

function handleCellClick({ row }) {
  selectedId.value = row[colProps.keyField] // 更新选中的 label
}
</script>
